<template>
	<view class="list-wrap">
		<view class="tab-wrap">
			<view class="search-box">
				<view class="search-main">
					<view style="padding: 0 0px 0 10px;font-size: 14px;color: #333;">
						地区
					</view>
					<image src="../../static/sxjt.png" mode="aspectFit" style="width: 10px;height: 10px;">
					</image>
					<view class="line"></view>
					<input v-model="keyword" class="search-input" type="text" placeholder="输入地址查可发货产品" />
					<view class="search-btn">
						搜索
					</view>
				</view>
				<view class="search-reset" @click="clickSearchReset">
					重置
				</view>
			</view>
			<liuyuno-tabs :tabData="catList" :activeIndex="tabIndex" @tabClick='tab' class="nav" />
			<!-- <view class="contx" v-if="countdown">
				<view class="roll">
					<mySwiper></mySwiper>
				</view>
				<view class="info-price-right">
					<view style="margin-right: 10rpx;">距失效</view>
					<my-countdown></my-countdown>

				</view>
			</view> -->

			<view class="contx">
				<view class="contx-left">
					电信
				</view>
				<view class="contx-right">
					联通
				</view>
			</view>

		</view>
		<view class="product-box">
			<view class="commodity">
				<product v-for="(item,index) in dataList" :key="item" style="width: 100%;" :obj="item">
				</product>
			</view>
			<uni-load-more :status="dataStatus" :iconSize="20"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import product from "@/components/product-item/product-item.vue"
	import mySwiper from "@/components/my-swiper/my-swiper-t.vue"
	export default {
		name: "list",
		components: {
			product,
			mySwiper
		},
		props: {
			countdown: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				catList: [{
					"cid": "39",
					"name": "可选号"
				}, {
					"cid": "29",
					"name": "年龄"
				}, {
					"cid": "34",
					"name": "激活方式"
				}, {
					"cid": "36",
					"name": "运营商（联通)"
				}, {
					"cid": "33",
					"name": "运营商（电信)"
				}],
				tabIndex: 0,
				dataStatus: 'loading',
				keyword: "",
				dataList: [{
					title: "星耀卡 29元 155G通用+100分钟 首充100元",
					desc: "155G通用大流量，不限速，不限时",
					size: "155",
					none: "0",
					time: "100",
					note: "长期优惠，省钱首选",
					id: 0,
					img: "/static/img2.png"
				}]
			};
		},
		// computed:{
		// 	time(){
		// 		return this.$store.state.time
		// 	}
		// },
		methods: {
			tab(e) {
				console.log(e)
				this.tabIndex = e
			},
			clickSearchReset() {
				this.keyword = "";
			},
			reachBottom() {
				this.dataStatus = "loading"
				console.log("触底，加载更多页面滚动至底部")
				setTimeout(() => {
					this.dataStatus = "noMore"
				}, 2000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-box {
		display: flex;
		justify-content: space-around;
		height: 50px;
		line-height: 50px;
		margin-bottom: 10px;

		.search-main {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 50px;
			line-height: 50px;
			border-radius: 25px;
			border-style: solid;
			border-width: 1px;
			border-color: #08a0e2;
		}

		.search-reset {}

		.search-btn {
			background-color: #08a0e2;
			color: white;
			height: 44px;
			line-height: 44px;
			border-radius: 22px;
			width: 70px;
			text-align: center;
			margin-right: 2.5px;
			font-size: 14px;
			font-weight: 600;
		}

		.search-input {
			font-size: 14px;
			color: #333;
			padding: 0 1px 0 0;
		}

		.line {
			width: 1px;
			height: 20px;
			background-color: #e3e3e3;
			margin: 0 10px;
		}
	}

	.list-wrap {
		width: 100%;
		display: flex;
		flex-direction: column;
		margin-top: -10px;
	}

	.tab-wrap {
		position: sticky;
		top: 0;
		z-index: 10;
		background: $uni-bg-color;
		padding: 10px 15px;
	}

	.contx {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 20rpx 0 10rpx;

		swiper {
			width: 100%;
			height: 100%;
		}

		.roll {
			width: 60%;
			height: 50rpx;
			background: rgba(0, 0, 0, 0.3);
			border-radius: 50rpx;

			image {
				width: 140px;
				height: 140px;
				border-radius: 50%;
				margin-right: 10rpx;
			}
		}

		.info-price-right {
			display: flex;
			align-items: center;
		}

		.contx-left {
			background-color: white;
			height: 34px;
			line-height: 34px;
			border-radius: 17px;
			font-size: 12px;
			padding: 0 20px;
		}

		.contx-right {
			background-color: rgba(255, 211, 172, 0.3);
			border-radius: 17px;
			border-width: 1px;
			border-style: solid;
			border-color: orange;
			color: orange;
			height: 34px;
			line-height: 34px;
			padding: 0 20px;
			margin-left: 10px;
			font-size: 12px;
		}
	}

	.product-box {
		width: 100%;
		position: relative;
		box-sizing: border-box;

		.commodity {
			width: 100%;
			margin: 0 auto;
			padding: 20rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}
	}
</style>